
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<meta name="description" content="description">
 
<title>Masonry</title>
 
<link rel="stylesheet" type="text/css" media="screen" href="masonry.css"/>
 
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
 
</head>
 
<body>
<style>
.body-container { padding-top: 81px; }
.new-header-container { background-color: #ebebeb; height: 54px; padding: 13px 0px; position: fixed; width: 100%; z-index: 9999; border-bottom: 1px solid #fff; box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.4); }
#new-logo { width: 245px; margin-top: 6px; }
#new-menu-pad-top { margin: 7px 17px 0px 17px; width: 382px; }
//#call-free { background: url('../../images/bg-telephone.png') center top no-repeat; padding: 8px 10px 16px 20px; width: 162px; font-family: 'CenturyGothicBold'; font-size: 20px; display: block; color: #000; text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.71); line-height: 15px; text-transform: uppercase; }
#call-free span { display: block; font-size: 10px; color: #828282; }
/*#new-social-network { width: 100px; margin-left: 25px; margin-top: 10px; }
#new-social-network ul { margin: 0px; padding: 0px; }
#new-social-network ul li { list-style: none; float: left; display: block; margin-left: 10px; }
#new-social-network ul li a { display: block; }
#new-social-network ul li a img { display: block; }
#new-social-network ul li a:hover img { opacity: 0.5; }*/


/* jquery-method */
span.roll {
    background:url(map.png) center center no-repeat #000;
    height: 100%;
    position: absolute;
    width: 100%;
    z-index: 10;	top:-5px; cursor: pointer;
/*	top:0;left:0;*/
	-webkit-box-shadow: 0px 0px 4px #000;
	-moz-box-shadow: 0px 0px 4px  #000;
	box-shadow: 0px 0px 4px  #000; 
} 
 
</style>
 <div class="new-header-container">
	<div class="container">
		<img src="logo.png"  />
	</div>
</div>
	<div id="container">
		
		<div class="masonryImage">
	        <span class="roll" ></span>
			<img src="1.jpg" alt="" />
		</div>
		
		<div class="masonryImage">
	        <span class="roll" ></span>
			<img src="3.jpg" alt="" />
		</div>
		
		<div class="masonryImage">
        	<span class="roll" ></span>
			<img src="6.jpg" alt="" />
		</div>
		
		<div class="masonryImage">
			<img src="1.jpg" alt="" />
		</div>
		
		<div class="masonryImage">
			<img src="10.jpg" alt="" />
		</div>
		
		<div class="masonryImage">
			<img src="6.jpg" alt="" />
		</div>
		
		<div class="masonryImage">
			<img src="9.jpg" alt="" />
		</div>
		
		<div class="masonryImage">
			<img src="5.jpg" alt="" />
		</div>
		
		<div class="masonryImage">
			<img src="8.jpg" alt="" />
		</div>
		
		<div class="masonryImage">
			<img src="10.jpg" alt="" />
		</div>
		
		<div class="masonryImage">
			<img src="5.jpg" alt="" />
		</div>
		
		<div class="masonryImage">
			<img src="11.jpg" alt="" />
		</div>
		<div class="masonryImage">
			<img src="1.jpg" alt="" />
		</div>
		
		<div class="masonryImage">
			<img src="8.jpg" alt="" />
		</div>
		
		<div class="masonryImage">
			<img src="7.jpg" alt="" />
		</div>
		
		<div class="masonryImage">
			<img src="9.jpg" alt="" />
		</div>
		
		<div class="masonryImage">
			<img src="3.jpg" alt="" />
		</div>
		
		<div class="masonryImage">
			<img src="8.jpg" alt="" />
		</div>
		
		<div class="masonryImage">
			<img src="9.jpg" alt="" />
		</div>
		
		<div class="masonryImage">
			<img src="9.jpg" alt="" />
		</div>
		
		<div class="masonryImage">
			<img src="10.jpg" alt="" />
		</div>
		
		<div class="masonryImage">
			<img src="12.jpg" alt="" />
		</div>
		
		<div class="masonryImage">
			<img src="8.jpg" alt="" />
		</div>
		
		<div class="masonryImage">
			<img src="6.jpg" alt="" />
		</div>
	
	</div>
   
   <script src="jquery-1.7.1.min.js"></script>
   <script src="jquery.masonry.min.js"></script>
   <script>
     $(function(){
   
       var $container = $('#container');
     
       $container.imagesLoaded( function(){
         $container.masonry({
           itemSelector : '.masonryImage'
         });
       });
     
     });
	 
	 
	 
	 $(function() {
		// OPACITY OF BUTTON SET TO 0%
		$(".roll").css("opacity","0");
		 
		// ON MOUSE OVER
		$(".roll").hover(function () {
		 
		// SET OPACITY TO 70%
		$(this).stop().animate({
		opacity: .7
		}, "slow");
		},
		 
		// ON MOUSE OUT
		function () {
		 
		// SET OPACITY BACK TO 50%
		$(this).stop().animate({
		opacity: 0
		}, "slow");
		});
	});
	 
   </script>
   
   
   
   
   
 
</body>
</html>